// pages/da/da.js
var util = require('../../../utils/util.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 4,//后端给的分数,显示相应的星星  
    one_1: '',
    two_1: '',
    one_2: 0,
    two_2: 5,
    aa:'',
    aa1:'',
    aa2:'',
    list: [20, 40,24,26,32,25],
    h32: 32,
    h64: 64,
    h360: 360,
    h420: 420,
    s28: 28,
    s18: 18,
    //Y轴分成的大分段
    heightLineNum: 3,
    //X轴分成的大分段
    widthLineNum: 10,
    //Y轴一个分段的值
    yOneDuan: 20
  },
  onLoad: function (options) {
    //情况一:展示后台给的评分  
    this.setData({
      one_1: this.data.num,
      two_1: 5 - this.data.num
    })
    this.initChart()
  },
  // 初始化条形图
  initChart: function () {
    const ctx = wx.createCanvasContext('canvasId')

    ctx.beginPath()
    ctx.setStrokeStyle('#999999')
    ctx.setFillStyle('#AAAAAA')
    ctx.setLineWidth(1)

    //坐标原点，Y轴坐标值从上往下是增加
    const leftBottomX = this.getEleWidth(this.data.h64)
    const leftBottomY = this.getEleWidth(this.data.h360)
    //Y坐标
    const leftTopX = this.getEleWidth(this.data.h64)
    const leftTopY = this.getEleWidth(this.data.h32)
    //X坐标
    const rightBottomX = this.getEleWidth(this.data.h420)
    const rightBottomY = this.getEleWidth(this.data.h360)

    const yHeight = this.getEleWidth(this.data.h360 - this.data.h32)
    const xWidth = this.getEleWidth(this.data.h420 - this.data.h64)

    //从Y轴坐标开始画坐标系
    //Y轴坐标到原点坐标画出Y轴线
    //画完Y轴线，再从原点坐标到X轴坐标画出X轴线
    ctx.moveTo(leftTopX, leftTopY)
    ctx.lineTo(leftBottomX, leftBottomY)
    ctx.lineTo(rightBottomX, rightBottomY)
    //设置字体大小
    ctx.setFontSize(this.getEleWidth(this.data.s28))
    //设置字的位置
    ctx.fillText("", this.getEleWidth(340), this.getEleWidth(32))

    //划分Y轴
    this.drawYScale(ctx);
    //划分X轴
    this.drawXScale(ctx);
    //画条形图
    this.drawRectScale(ctx);

    ctx.stroke()
    ctx.draw(true)
  },

  //划分Y轴
  drawYScale: function (ctx) {
    var that = this;

    //Y轴坐标刻度横坐标起点
    var scaleStartX = this.getEleWidth(this.data.h64)
    //长的刻度
    var scaleEndX = this.getEleWidth(this.data.h64 + 18)
    //短的刻度
    var littleScaleEndX = this.getEleWidth(this.data.h64 + 9)

    //Y轴刻度总高度
    const yHeight = this.getEleWidth(this.data.h360)
    //一个大分段的长度，一共分为6段
    var oneScaleX = yHeight / this.data.heightLineNum
    //大分段数字字体大小
    ctx.setFontSize(this.getEleWidth(this.data.s18))
    //大分段数字位置横坐标
    var textX = this.getEleWidth(this.data.h64 - 42)
    //大分段，长刻度：50-300
    for (var i = 1; i < this.data.heightLineNum; i++) {
      var scaleEndY = yHeight - oneScaleX * i
      //画长刻度线条
      ctx.moveTo(scaleStartX, scaleEndY)
      ctx.lineTo(scaleEndX, scaleEndY)
      ctx.fillText(this.data.yOneDuan * i, textX, scaleEndY + this.getEleWidth(10))
      var littleScaleStartY = yHeight - oneScaleX * (i - 1)
      //小分段，短刻度
      for (var j = 1; j < 5; j++) {
        var littleScaleEndY = littleScaleStartY - (oneScaleX / 5) * j
        //画短刻度线条
        ctx.moveTo(scaleStartX, littleScaleEndY)
        ctx.lineTo(littleScaleEndX, littleScaleEndY)
        ctx.stroke();
      }
    }
  },

  //划分X轴
  drawXScale: function (ctx) {
    var that = this;
    //X轴刻度值Y坐标
    var scaleStartY = this.getEleWidth(that.data.h360)
    //X轴总长度=X轴横坐标-向右偏移长度
    const xWidth = this.getEleWidth(that.data.h420 - that.data.h64)
    //X轴起始点
    const xMaginLeft = this.getEleWidth(that.data.h64)
    //一个分段的宽度
    const oneScaleX = xWidth / (that.data.widthLineNum + 1)
    for (var i = 0; i < that.data.widthLineNum + 1; i++) {
      var toEndX = xMaginLeft + oneScaleX * i;
      ctx.fillText(i, toEndX - this.getEleWidth(5), scaleStartY + this.getEleWidth(24))
    }
  },

  //画条形方框
  drawRectScale: function (ctx) {
    var that = this;
    //X轴总长度=X轴横坐标-向右偏移长度
    const xWidth = this.getEleWidth(that.data.h420 - that.data.h64)
    const yHeight = this.getEleWidth(that.data.h360)

    //X轴起始点
    const xMaginLeft = this.getEleWidth(that.data.h64)
    //X坐标，一个空格的值
    const oneScaleX = xWidth / (that.data.widthLineNum + 1)
    //Y坐标，一个空格的值
    var oneScaleY = yHeight / this.data.heightLineNum

    for (var i = 0; i < that.data.list.length; i++) {
      const currentRect = that.data.list[i];
      //条矩形的宽度
      const rectWidth = oneScaleX / 3 * 2;
      //条矩形的高度
      const rectHeight = currentRect / this.data.yOneDuan * oneScaleY;
      //矩形左上角的x坐标和y坐标
      const x = xMaginLeft - (oneScaleX - rectWidth) / 2  + oneScaleX * (i + 1);
      const y = yHeight - rectHeight
      //绿色填充
      ctx.setFillStyle('#D8BFD8')
      //画框
      ctx.fillRect(x, y, rectWidth, rectHeight);
    }
  },

  //获取屏幕自适应宽度
  getEleWidth: function (w) {
    var real = 0;
    try {
      var res = wx.getSystemInfoSync().windowWidth;
      //以宽度480px设计做宽度的自适应
      var scale = (480 / 2) / (w / 2);
      real = Math.floor(res / scale);
      return real;
    } catch (e) {
      return false;
    }
  },
  //情况二:用户给评分  
  in_xin: function (e) {
    var in_xin = e.currentTarget.dataset.in;
    var one_2;
    if (in_xin === 'use_sc2') {
      one_2 = Number(e.currentTarget.id);
    } else {
      one_2 = Number(e.currentTarget.id) + this.data.one_2;
    }
    this.setData({
      one_2: one_2,
      two_2: 5 - one_2
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  change:function()
  {
      this.setData({
        aa:'gang',
        aa1:'',
        aa2:''
      })
  },
  change1: function () {
    this.setData({
      aa1: 'gang',
      aa:'',
      aa2:''
    })
  },
  change2: function () {
    this.setData({
      aa2: 'gang',
      aa1:'',
      aa:''
    })
  }
})